<template>
  <div>
    <div>
      <div class="colorGrass font-bold" :style="{'font-size': kFOne + 'px'}">金融机构授信情况统计表</div>
    </div>
    <div>
      <dv-capsule-chart :config="config" :style="{ width: kWOne + 'px',height: kHOne + 'px'}"/>
    </div>
  </div>
</template>

<script>
import {getComplexJson} from '../api'

export default {
  name: 'ChartTwo',
  inject: ['getMyData'],
  computed: {
    myData() {
      return this.getMyData().chartTwo;
    }
  },
  data() {
    return {
      chartInstance: null,
      allData: null,
      // 高度
      kHOne: null,
      // 宽度
      kWOne: null,
      // 标题字体
      kFOne: null,
      // 屏幕器监控
      screenTime: null,
      // 数据刷新定时器
      dataTimer: null,
      // 翻页定时器
      pageTimer: null,
      config: {
        showValue: true,
        data: []
      },
      // 获取浏览器可视区域高度（包含滚动条）、 window.innerHeight
      // 获取浏览器可视区域高度（不包含工具栏高度）、document.documentElement.clientHeight
      // 获取body的实际高度  (三个都是相同，兼容性不同的浏览器而设置的) document.body.clientHeight
      screenHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      screenWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
    }
  },
  beforeMount() {
    this.kWOne = Math.round(this.screenWidth * 0.3)
    this.kHOne = Math.round(this.screenHeight * 0.42)
    this.kFOne = Math.round(this.screenWidth / 80)
  },
  mounted() {
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenWidth, false);
    this.resizeScreen();
    // 获取后端接口数据
    // this.getCurrentData();
    // 数据分组
    this.getData();
    // 执行局部数据刷新定时器
    // this.getDataTimer();
    // 数据切换定时器
    this.getPageTimer();
  },
  destroyed() {
    // 清除自适应定时器
    clearInterval(this.screenTime);
    this.screenTime = null;
    // 清除局部刷新定时器
    clearInterval(this.dataTimer);
    this.dataTimer = null;
    // 清除页面刷新定时器
    clearInterval(this.pageTimer);
    this.pageTimer = null;
    // 页面大小改变时触发销毁
    window.removeEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发销毁
    window.removeEventListener('resize', this.getScreenWidth, false);
  },
  methods: {
    resizeScreen() {
      this.screenTime = setInterval(() => {
        this.getScreenHeight();
        this.getScreenWidth();
      }, 200)
    },
    // 获取浏览器高度进行自适应
    getScreenHeight() {
      this.screenHeight = window.innerHeight || document.documentElement.innerHeight || document.body.clientHeight;
      // 四舍五入取整数
      this.kHOne = Math.round(this.screenHeight * 0.42);
    },
    // 字体大小根据宽度自适应
    getScreenWidth() {
      this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      this.kWOne = Math.round(this.screenWidth * 0.3);
      this.kFOne = Math.round(this.screenWidth / 80);
    },
    getData(value, unit) {
      getComplexJson().then(res => {
        this.allData = {
          aList: [
            {
              name: "工商银行",
              value: res.chartTwo.aList.num1
            },
            {
              name: "建设银行",
              value: res.chartTwo.aList.num2
            },
            {
              name: "农业银行",
              value: res.chartTwo.aList.num3
            },
            {
              name: "中国银行",
              value: res.chartTwo.aList.num4
            },
            {
              name: "嘉兴银行",
              value: res.chartTwo.aList.num5
            },
            {
              name: "交通银行",
              value: res.chartTwo.aList.num6
            },
            {
              name: "光大银行",
              value: res.chartTwo.aList.num7
            },
            {
              name: "中信银行",
              value: res.chartTwo.aList.num8
            },
            {
              name: "招商银行",
              value: res.chartTwo.aList.num9
            },
            {
              name: "华夏银行",
              value: res.chartTwo.aList.num10
            }
          ],
          bList: [
            {
              name: "恒丰银行",
              value: res.chartTwo.bList.num1
            },
            {
              name: "汉口银行",
              value: res.chartTwo.bList.num2
            },
            {
              name: "江苏银行",
              value: res.chartTwo.bList.num3
            },
            {
              name: "浦发银行",
              value: res.chartTwo.bList.num4
            },
            {
              name: "广发银行",
              value: res.chartTwo.bList.num5
            },
            {
              name: "重庆银行",
              value: res.chartTwo.bList.num6
            },
            {
              name: "四川银行",
              value: res.chartTwo.bList.num7
            },
            {
              name: "广州银行",
              value: res.chartTwo.bList.num8
            },
            {
              name: "浙商银行",
              value: res.chartTwo.bList.num9
            },
            {
              name: "南京银行",
              value: res.chartTwo.bList.num10
            }
          ],
          cList: [
            {
              name: "徽商银行",
              value: res.chartTwo.cList.num1
            },
            {
              name: "中原银行",
              value: res.chartTwo.cList.num2
            },
            {
              name: "郑州银行",
              value: res.chartTwo.cList.num3
            },
            {
              name: "九江银行",
              value: res.chartTwo.cList.num4
            },
            {
              name: "江西银行",
              value: res.chartTwo.cList.num5
            },
            {
              name: "民生银行",
              value: res.chartTwo.cList.num6
            },
            {
              name: "盛京银行",
              value: res.chartTwo.cList.num7
            },
            {
              name: "龙江银行",
              value: res.chartTwo.cList.num8
            },
            {
              name: "兰州银行",
              value: res.chartTwo.cList.num9
            },
            {
              name: "天津银行",
              value: res.chartTwo.cList.num10
            }
          ],
          dList: [
            {
              name: "渤海银行",
              value: res.chartTwo.dList.num1
            },
            {
              name: "兴业银行",
              value: res.chartTwo.dList.num2
            },
            {
              name: "北京银行",
              value: res.chartTwo.dList.num3
            },
            {
              name: "青海银行",
              value: res.chartTwo.dList.num4
            },
            {
              name: "苏州银行",
              value: res.chartTwo.dList.num5
            },
            {
              name: "成都银行",
              value: res.chartTwo.dList.num6
            },
            {
              name: "柳州银行",
              value: res.chartTwo.dList.num7
            },
            {
              name: "瑞士银行",
              value: res.chartTwo.dList.num8
            },
            {
              name: "杭州银行",
              value: res.chartTwo.dList.num9
            },
            {
              name: "东亚银行",
              value: res.chartTwo.dList.num10
            }
          ]
        }
        const {config} = this;
        // 将数据赋值给DataV的胶囊柱图
        if (value == null) {
          this.config.data = this.allData.aList;
          this.config.unit = "%";
        } else {
          this.config.data = value;
          this.config.unit = unit;
        }
        this.config = {...this.config}
      })
    },
    // 数据刷新定时器
    getDataTimer() {
      this.dataTimer = setInterval(() => {
      }, 60000)
    },
    // 数据切换定时器
    getPageTimer() {
      let index = 1;
      this.dataTimer = setInterval(() => {
        index++;
        if (index == 1) {
          this.getData(this.allData.aList, "笔数");
        } else if (index == 2) {
          this.getData(this.allData.bList, "笔数");
        } else if (index == 3) {
          this.getData(this.allData.cList, "笔数");
        } else if (index == 4) {
          this.getData(this.allData.dList, "笔数");
        } else if (index > 5) {
          index = 1;
          this.getData(this.allData.aList);
        }
      }, 3000)
    }
  }
}
</script>

